<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="copyright" content="All Rights Reserved, Copyright (C) 2013, Wuyeguo, Ltd." />
<title>EasyUI Web Admin Power by Wuyeguo</title>
<link rel="stylesheet" type="text/css" href="../easyui/1.5.3/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="../css/wu.css" />
<link rel="stylesheet" type="text/css" href="../css/icon.css" />
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="../js/jquery.serializejson.min.js"></script>
</head>
<body>
	 <div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'west',split:true" title="West" style="width:200px;">
				<ul id="tt"></ul>
				<a href="#" class="easyui-linkbutton c1" style="width:42px;margin-top:20px;" onclick="addRootNode()">添加</a>
		        <a href="#" class="easyui-linkbutton c2" style="width:42px;margin-top:20px;" onclick="editNode()">修改</a>
		        <a href="#" class="easyui-linkbutton c3" style="width:42px;margin-top:20px;" onclick="remove()">删除</a>
        </div>
        <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
            		<form id="ff" method="post">
            			<input type="text" name="parentId" id="parentId" style="visibility:hidden;"/>
			            <div style="margin-bottom:20px">
			                <input class="easyui-textbox" name="text" style="width:100%" data-options="label:'Name:',required:true">
			            </div>
			            <div style="margin-bottom:20px">
			                <input class="easyui-textbox" name="email" style="width:100%" data-options="label:'Email:',required:true,validType:'email'">
			            </div>
			            <div style="margin-bottom:20px">
			                <input class="easyui-textbox" name="title" style="width:100%" data-options="label:'Title:',required:true,validType:'title'">
			            </div>
			            
			        </form>
			        <div style="text-align:center;padding:5px 0">
			            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
			            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
			        </div>
        </div>
    </div>
    
    <script>
		var nodeId = null;   	
    	$('#tt').tree({
    		animate:true,
		    url:'http://localhost:3000/cate/list',
		    method:'get',
		    onClick: function(node){
				$("#parentId").val(node._id);
			}
		});

		function remove(){
			var node = $('#tt').tree('getSelected');
			console.log(node._id)
			var id = node._id;			
			$.ajax({
				type:"delete",
				url:"http://localhost:3000/cate/data/"+id
			}).then(function(res){
				$("#tt").tree('reload');
			});
		}
		
		function addRootNode(){
//			console.log($("#parentId").html())
			$("#parentId").val("");
		}
		//修改
		function editNode(){
			var node = $('#tt').tree('getSelected');
			nodeId = node._id;
			
			console.log(nodeId)
			$("#ff").form('load',node);
			$("#tt").tree('reload');

		}
        function submitForm(){
	            $('#ff').form('submit',{
	                onSubmit:function(){
						if($(this).form('enableValidation').form('validate')){
							// 如果nodeId存在，不为null，那么，表单提交就是提交到修改的地址，
							// 否则，则是新增
							var postUrl;
							if(nodeId!==null){
								// edit
								 postUrl = 'http://localhost:3000/cate/data/' + nodeId; 
							}else{
								// add
								 postUrl = 'http://localhost:3000/cate/data'; 
							}
							
							var formData = $('#ff').serializeJSON();
							if(formData.parentId.length === 0){
								delete formData.parentId;
							}
							
							
							console.log(postUrl,formData)
							$.ajax({
								type:"post",
								url:postUrl, 
								data: formData
							}).then(function(res){
								$("#tt").tree('reload');
							});
						}else{
							alert('表单验证失败');
						}
						
	                }
	            });
	        }
	        function clearForm(){
	            $('#ff').form('clear');
	        }
    </script>
</body>
</html>